window.onload = function() {
	$('#loading').hide();
}

$(document).on('touchmove', function(e) {
	e.preventDefault();
});

var vm = new Vue({
	el: '#main',
	data: {
		num: 1,
		loading: true,
		caseone: false,
		casetwo: false,
		handshow: false,
		handfirstthing: false,
		handbottomshow: false,
		text1show: false,
		casethree: false,
		casethreetop: false,
		casethreebottom: false,
		text2show: false,
		casefour: false,
		casefourthing: false,
		casefourleft: false,
		casefourright: false,
		text4show: false,
		casefive: false,
		casefivebg: false,
		casefiveself: false,
		casefiveaunt1: false,
		casefiveaunt2: false,
		text5show: false,
		casesix: false,
		casesixText: false,
		caseseven: false,
		caseseven2: false,
		caseseven3: false,
		caseseven4: false,
		caseseven5: false,
		caseeight: false,
		text8: false
	},
	created() {
		this.num = 1;
		this.loading = true;
	},
	mounted() {
		this.loading = false;
		this.caseone = true;
		var hammertime1 = new Hammer(document.getElementById('clickone'));
		hammertime1.on('tap', function(ev) {
			vm.caseone = false;
			vm.casetwo = true;
			vm.touch();
		});
		var hammertime2 = new Hammer(document.getElementById('Arrow'));
		hammertime2.on('tap', function(ev) {
			vm.caseone = false;
			vm.casetwo = true;
			vm.touch();
		});
		var href = new Hammer(document.getElementById('lastbutton'));
		href.on('tap', function(ev) {
			location.href = 'http://lenovo.zt-tech.net/w.html';
		});
	},
	methods: {
		touch() {
			var panup = new Hammer(document.getElementById('outside'));
			panup.on('panup', function(ev) {
				if(ev.isFinal == true) {
					switch(vm.num) {
						case 1:
							vm.handshow = true;
							vm.handfirstthing = true;
							setTimeout(function() {
								vm.handbottomshow = true;
							}, 500)
							break;
						case 2:
							vm.text1show = true;
							break;
						case 3:
							vm.casetwo = false;
							vm.handshow = false;
							vm.handfirstthing = false;
							vm.handbottomshow = false;
							vm.casethree = true;
							break;
						case 4:
							vm.casethreetop = true;
							setTimeout(function() {
								vm.casethreebottom = true;
							}, 500)
							break;
						case 5:
							vm.text2show = true;
							break;
						case 6:
							vm.casethree = false;
							vm.casethreetop = false;
							vm.casethreebottom = false;
							vm.text2show = false;
							vm.casefour = true;
							break;
						case 7:
							vm.casefourthing = true;
							setTimeout(function() {
								vm.casefourleft = true;
							}, 300)
							setTimeout(function() {
								vm.casefourright = true;
							}, 600)
							break;
						case 8:
							vm.text4show = true;
							break;
						case 9:
							vm.casefour = false;
							vm.casefourthing = false;
							vm.casefourleft = false;
							vm.casefourright = false;
							vm.text4show = false;
							vm.casefive = true;
							vm.casefivebg = true;
							break;
						case 10:
							vm.casefivebg = false;
							vm.casefiveself = true;
							setTimeout(function() {
								vm.casefiveaunt1 = true;
							}, 300)
							setTimeout(function() {
								vm.casefiveaunt2 = true;
							}, 600)
							break;
						case 11:
							vm.text5show = true;
							break;
						case 12:
							vm.casefive = false;
							vm.casefiveself = false;
							vm.casefiveaunt1 = false;
							vm.casefiveaunt2 = false;
							vm.text5show = false;
							vm.casesix = true;
							vm.casesixText = true;
							break;
						case 13:
							vm.casesixText = false;
							vm.casesix = false;
							setTimeout(function() {
								vm.caseseven = true;
								if(vm.caseseven == true) {
									var text7 = new Hammer(document.getElementById('text7'));
									text7.on('panup', function(ev) {
										if(ev.isFinal == true) {
											vm.caseseven = false;
											vm.caseseven2 = true;
											setTimeout(function() {
												vm.caseseven2 = false;
												vm.caseseven3 = true;
											}, 300)
											setTimeout(function() {
												vm.caseseven3 = false;
												vm.caseseven4 = true;
											}, 600)
											setTimeout(function() {
												vm.caseseven4 = false;
												vm.caseseven5 = true;
											}, 900)
											setTimeout(function() {
												vm.caseseven5 = false;
												vm.caseeight = true;
												setTimeout(function() {
													vm.text8 = true;
												}, 1000)
											}, 1200)
										}
									})
								}
							}, 2000)
							break;
						case 14:
							if(vm.caseseven == true) {
								vm.caseseven = false;
								vm.caseseven2 = true;
								setTimeout(function() {
									vm.caseseven2 = false;
									vm.caseseven3 = true;
								}, 300)
								setTimeout(function() {
									vm.caseseven3 = false;
									vm.caseseven4 = true;
								}, 600)
								setTimeout(function() {
									vm.caseseven4 = false;
									vm.caseseven5 = true;
								}, 900)
								setTimeout(function() {
									vm.caseseven5 = false;
									vm.caseeight = true;
									setTimeout(function() {
										vm.text8 = true;
									}, 1000)
								}, 1200)
							}
							break;
					}
					vm.num += 1;
				}
			});
		}
	}
})